<template>
	<view class="class">
		<u-navbar :border-bottom="false" title="作业列表"></u-navbar>
		<view class="info acea-row row-column">
			<text>{{info.deadline}} 截止</text>
			<view class="text2 acea-row row-middle">
				{{info.title}}
				<u-icon name="share" color="#1f2329" size="42" @click.stop="share" style="margin-left: 32rpx;"></u-icon>
			</view>
			<text>{{info.bjname}} （{{info.allnum}}人）</text>
			<view class="introduction">{{info.request}}</view>
			<view class="imgList" v-if="info.file.length != 0">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="imgItem" v-for="(item,index) in info.file" :key="index">
						<image v-if="!checkVideoUrl(item)" :src="baseUrl + item" mode="aspectFill" @click="previewImage(index)"></image>
					</view>
					<view class="imgItem" v-for="(item,index) in info.file" :key="index">
						<video @click="doPreviewVideo(baseUrl + item)" v-if="checkVideoUrl(item)" :src="baseUrl + item" :controls='false'></video>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="container">
			<view class="title acea-row row-middle row-between">
				<view class="left acea-row row-middle">
					<view class="item acea-row row-middle">
						<text>已批阅</text>
						<text>{{info.pynum}}</text>
					</view>
					<view class="item acea-row row-middle">
						<text>已提交</text>
						<text>{{info.tjnum}}</text>
					</view>
					<view class="item acea-row row-middle">
						<text>未阅读</text>
						<text>{{info.wdnum}}</text>
					</view>
					<view class="item acea-row row-middle">
						<text>已阅读</text>
						<text>{{info.ydnum}}</text>
					</view>
				</view>
				<view class="right" @click="tixingAll">一键提醒</view>
			</view>
			<view class="list acea-row row-column">
				<view class="item acea-row row-middle" v-for="(item,index) in info.stuarr" :key="index" @click="goDetail(item.id,item.name,item.state)">
					<image :src="item.headimg?baseUrl+item.headimg:'../../../static/images/noticeDetail-student-default.png'" mode="aspectFill"></image>
					<view class="content acea-row row-column">
						<text>{{item.name}}</text>
						<text>{{item.state}}</text>
					</view>
					<!-- <u-button style="margin-right: 30rpx;border: none;" @click.stop="share(item.id)" open-type="share" >
						<u-icon name="share" color="#1661FF" size="38"></u-icon>
					</u-button> -->
					<u-icon name="phone" color="#1661FF" size="38" @click.native.stop="tixing(item.id,item.name)"></u-icon>
				</view>
			</view>
		</view>
		<view :style="'height: calc('+iosSafeBottom+'px + '+SafeBottom+'rpx);'"></view>
		<previewVideo :show.sync="showPreviewVideo" :url="previewVideoUrl"></previewVideo>
	</view>
</template>

<script>
	import common from '../../../api/common.js'
	import request from '../../../api/request.js'
	const app = getApp()
	export default {
		data(){
			return{
				baseUrl:app.globalData.baseUrl,
				iosSafeBottom:app.globalData.iosSafeBottom,
				SafeBottom:app.globalData.iosSafeBottom==0?'24':'-24',
				id:'',
				common,
				info:{
					file:[]
				},
				list:[
					{name:'章子怡',type:1},
					{name:'章子怡',type:2},
					{name:'章子怡',type:3},
					{name:'章子怡',type:4},
				],
				
				showPreviewVideo:false,
				previewVideoUrl:'',
				
				share_id:'',
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
			}
		},
		onShow() {
			this.init()
		},
		methods:{
			init(){
				this.getList()
			},
			getList(){
				let data = {
					task_id:this.id
				}
				request.go((e)=>{
					this.info = e.data
					uni.stopPullDownRefresh()
				},"/Jwteachertask/taskinfolist",data,"POST")
			},
			tixing(id,name){
				uni.showModal({
					title:"提醒",
					content:`是否提醒${name}提交作业？`,
					success(e){
						if(e.confirm){
							request.go((e)=>{
								uni.showToast({
									icon:"success",
									title:"提醒成功"
								})
							},"/Jwteachertask/appnotify",{id},"POST")
						}
					}
				})
			},
			tixingAll(){
				const that = this
				uni.showModal({
					title:"一键提醒",
					content:"是否提醒所有学员？",
					success(e){
						if(e.confirm){
							let id = ""
							for(let i of that.info.stuarr){
								id = id+","+i.id
							}
							id = id.substring(1)
							request.go((e)=>{
								uni.showToast({
									icon:"success",
									title:"提醒成功"
								})
							},"/Jwteachertask/appnotify",{id},"POST")
						}
					}
				})
			},
			goDetail(id,name,state){
				if(state == "已提交"||state == "已批阅"){
					common.go('/pages/pack/class/homeworkDetail?id='+id+'&name='+name+'&state='+state)
				}else{
					uni.showToast({
						icon:"none",
						title:"作业未提交",
					})
				}
			},
			previewImage(current){
				let imgList = []
				let file = this.info.file
				for(let i in this.info.file){
					if(!app.globalData.checkVideoUrl(file[i])){
						imgList.push(app.globalData.baseUrl + file[i])
					}
				}
				uni.previewImage({
					urls:imgList,
					current:0
				})
			},
			checkVideoUrl(url){
				if(url != undefined){
					return app.globalData.checkVideoUrl(url)
				}
			},
			doPreviewVideo(url){
				this.showPreviewVideo = true;
				this.previewVideoUrl = url;
			},
			share(){
				uni.showLoading({
					title:'处理中'
				})
				const self = this;
				request.go((e)=>{
					uni.hideLoading();
					uni.previewImage({
						current:0,
						urls:[e.data.base64],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
							},
						}
					})
				},"/XcxApi/getShareDoHomeWork",{taskid:self.info.task_id},"POST")
			},
		},
		filters:{
			changeType(e){
				switch(e){
					case 1:
						return '已提交'
					break;
					case 2:
						return '已读'
					break;
					case 3:
						return '未读'
					break;
					case 4:
						return '未提交'
					break;
				}
			}
		},
		onPullDownRefresh(){
			this.init()
		},
		// onShareAppMessage(res) {
		// 	const self = this;
		// 	// console.log(self.share_id)
		// 	// return{
		// 	// 	title:self.info.title,
		// 	// 	path:'/pages/share/index?banji='+self.info.bjname+'&stuarr='+JSON.stringify(self.info.stuarr)
		// 	// }
		// }
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .info{
		padding: 48rpx 0 48rpx 64rpx;
		background-color: #FFFFFF;
	}
	.class .info text{
		display: block;
	}
	.class .info text:nth-child(1){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #8f959e;
		line-height: 32rpx;
		margin-bottom: 16rpx;
	}
	.class .info .text2{
		font-size: 46rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 600;
		color: #1f2329;
		line-height: 46rpx;
		margin-bottom: 48rpx;
	}
	.class .info text:nth-child(3){
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 36rpx;
	}
	.class .info .introduction{
		margin-top: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .info .imgList{
		width: 100%;
		margin-top: 32rpx;
		position: relative;
		overflow: hidden;
	}
	.class .info .imgList .imgItem{
		margin-right: 16rpx;
		display: inline-block;
	}
	.class .info .imgList .imgItem:last-of-type{
		margin-right: 0;
	}
	.class .info .imgList .scroll-view{
		display:flex;
		white-space: nowrap;
	}
	.class .info .imgList .imgItem image{
		width: 196rpx;
		height: 196rpx;
	}
	.class .info .imgList .imgItem video{
		width: 196rpx;
		height: 196rpx;
	}
	.class .container{
		margin: 32rpx auto 0;
	}
	.class .container .title .left{
		margin-left: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .title .left .item{
		margin-right: 16rpx;
	}
	.class .container .title .left .item text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.class .container .title .left .item text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1661FF;
		line-height: 40rpx;
	}
	.class .container .title .right{
		margin-right: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1661ff;
		line-height: 32rpx;
	}
	.class .container .list{
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin: 26rpx auto 0;
	}
	.class .container .list .item{
		width: 622rpx;
		padding: 32rpx 0;
		box-sizing: content-box;
		border-bottom: 2rpx solid #ebedf0;
		margin: auto;
	}
	.class .container .list .item:last-of-type{
		border-bottom: none;
	}
	.class .container .list .item image{
		display: block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.class .container .list .item .content{
		margin-left: 32rpx;
		flex: 1;
	}
	.class .container .list .item .content text{
		display: block;
	}
	.class .container .list .item .content text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 8rpx;
	}
	.class .container .list .item .content text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.class .container .list .item .checkbox{
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ebedf0;
		border-radius: 50%;
	}
	.class .container .list .item .checkbox.checkbox-active{
		background: #1661ff;
		border: none !important;
	}
</style>
